<template>
  <div class="box">
    <b>子组件</b>
    <div @click="cliEve">收到的名：{{ ming }}</div>
    <div>玩具：{{ toy }}</div>
    <div>人民币：{{ money }}</div>
    <button @click="sendToy(toy)">点我传值</button>
    <button @click="emitter.emit('send-money', 10)">点我给钱</button> <br />
    <button @click="sendVal">点我给钱2</button>
  </div>
</template>
<script>
import { defineComponent, reactive, toRefs, onMounted } from 'vue'
import emitter from '@/utils/emitter'
export default defineComponent({
  name: 'SonPage',
  components: {},
  props: ['ming'],
  emits: ['sendToy'],
  setup(props, { emit }) {
    const state = reactive({
      toy: '奥特曼',
      money: 100,
    })

    function sendToy(toy) {
      emit('sendToy', toy)
    }
    function sendVal() {
      emitter.emit('send-money', 20)
    }
    onMounted(() => {
      console.log('1111', emitter)
    })
    return {
      ...toRefs(state),
      sendToy,
      sendVal,
    }
  },
})
</script>
<style lang="css" scoped>
.box {
  border: 1px solid pink;
  padding: 20px;
}
</style>
